<template>
      <div class="logo" style="position: absolute;margin-top: 5px;margin-left: 25px;">
        <img style="width: 60px;height: auto" src="../../../public/城建校徽.jpg" alt="未加载">
      </div>
  <div class="menu">
    <div class="menu-left">
      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          router
          background-color="whit"
          text-color="black"
      >
        <el-menu-item  v-for="(item) in items" :key="item.key" :index="item.path">{{ item.content }}</el-menu-item>
      </el-menu>
    </div>

    <div class="menu-right">
      <div>
        <el-avatar @click="changeInformation"
            src="https://s2.xptou.com/2023/03/02/640030c363416.jpg"
        />
      </div>
      <div style="display: flex">
        <el-tooltip
            class="box-item"
            effect="light"
            content="退出登陆"
            placement="bottom"
        >
          <SwitchButton style="width: 1em; height: 1em; margin-left: 5px" @click="logout"/>
        </el-tooltip>
      </div>
    </div>
<!--  个人信息弹出框-->
    <el-dialog v-model="dialogTableVisible" width="70%">
      <div class="information">
      <el-descriptions title="个人信息" border size="large">
        <el-descriptions-item label="用户名:">{{roleForm.username}}</el-descriptions-item>
        <el-descriptions-item label="学工号:">{{roleForm.userNumber}}</el-descriptions-item>
        <el-descriptions-item label="电话:">{{roleForm.phone}}</el-descriptions-item>
        <el-descriptions-item label="email:">{{roleForm.email}}</el-descriptions-item>
        <el-descriptions-item label="身份">
          <el-tag>{{roleName}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="地址">
          {{roleForm.address}}
        </el-descriptions-item>
      </el-descriptions>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { SwitchButton } from "@element-plus/icons-vue";
export default {
  name: "NavMenu",
  components: {SwitchButton},
  data() {
    return {
      SwitchButton,
      roleName:'',
      items: [
        {path: "/Student", content: "出错了", key: 1},
        {path: "/HelloWorld", content: "出错了", key: 2},
        {path: "/HelloWorld", content: "出错了", key: 3}
      ],
      dialogTableVisible: false,
      roleForm: {
        userNumber:"默认",
        username: "默认",
        password: "默认",
        email: "默认",
        address: "默认",
        phone: "默认号码",
        nickname: "",
      },
    }
  },
  methods: {
    logout() {
      this.$store.commit('logout')
      this.$axios.get("logout").then(success => {
        console.log(success.data)
      }).catch(fail => {
        console.log(fail)
      })
      this.$router.replace('/login')
    },
    //查看个人信息
    changeInformation () {
      this.dialogTableVisible = true
    },
  },
  created() {
    this.roleForm = this.$store.state.user;
    if (this.roleForm.nickname==="student"){
      this.roleName ="学生";
    }else if(this.roleForm.nickname==="teacher"){
      this.roleName ="老师";
    }else {
      this.roleName ="管理员";
    }
    console.log(this.roleForm)
    if(window.localStorage.roles === 'admin'){
        this.items = [
          {path: "/Admin", content: "评奖评优管理", key: 1},
          {path: "/Admin/RolesInformation", content: "用户信息管理", key: 2},
          {path: "/Admin/AdminQuery", content: "综合考评查询", key: 3},
          {path: "/Admin/MessageSetting", content: "信息推送", key: 4},
          {path: "/Admin/DataStatistics", content: "数据统计", key: 5},
        ]

    } else if(window.localStorage.roles === 'teacher'){
      this.items = [
        {path: "/Teacher", content: "评奖评优审核", key: 1},
        {path: "/Teacher/StudentInformation", content: "查询学生信息", key: 2},
        {path: "/Teacher/Notice", content: "系统提示", key: 3},
      ]

    } else if (window.localStorage.roles === 'student'){
      this.items = [
        {path: "/StudentNotice", content: "首页", key: 2},
        {path: "/Student", content: "评奖评优", key: 2},
        {path: "/Student/MyAward", content: "我的申请", key: 3},
      ]
    }else {
      this.items = [
        {path: "/HelloWorld", content: "hello", key: 1},
      ]
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
.menu {
  display: -webkit-flex; /* Safari */
  display: flex;
  /*justify-content: space-between;*/
}
.menu div:nth-of-type(1) {
  flex-basis: 90%;
}

.menu-left {
  margin-left: 100px;
  /*display: -webkit-flex; !* Safari *!*/
  /*display: flex;*/
}
.menu-right {
  display: -webkit-flex; /* Safari */
  display: flex;
  align-items:center;
  margin-right: 50px;
}
/*个人信息框*/
.information {
  display: flex;
  justify-content: center;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>
